<template>
	<div class="content">
		<h2><i class="iconfont icon-suoyouhuopin-copy"></i>用户反馈详情</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search">
				<!--按关键字分类(商品id，商品编号，商品标题)-->
				<div class="search__list">
					<div class="search__list--title search__list--title-tip" >反馈类型(功能无效，还没做)</div>
					<el-select v-model="feedbackType" @change="handleFeedbackTypeChange">
						<el-option label="体验问题" :value="1"></el-option>
						<el-option label="功能异常" :value="2"></el-option>
						<el-option label="新功能建议" :value="3"></el-option>
						<el-option label="其他" :value="4"></el-option>
					</el-select>
				</div>
			</div>
			<!--反馈详情-->
			<div  v-loading="loading" >
				<el-table :data="feedback" strip height="450">
					<el-table-column label="反馈内容" prop="content" align="center">
						<template slot-scope="scope">
							<span class="feedback-des">{{scope.row.content}}</span>
						</template>
					</el-table-column>
					<el-table-column label="反馈时间" prop="feedback_time">
						<template slot-scope="scope">
							<span>{{ scope.row.feedback_time | formatTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="反馈人" prop="member.user_name"></el-table-column>
					<el-table-column label="反馈人昵称" prop="member.nick_name"></el-table-column>
					<el-table-column label="反馈类型" >
						<template slot-scope="scope">
							<el-tag v-if="scope.row.type && scope.row.type.feedback_type_id === 1">
								{{scope.row.type.type_name}}
							</el-tag>
							<el-tag v-else-if="scope.row.type && scope.row.type.feedback_type_id === 2" type='danger'>
								{{scope.row.type.type_name}}
							</el-tag>
							<el-tag v-else="scope.row.type && scope.row.type.feedback_type_id === 3" type='warning'>
								{{scope.row.type.type_name}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="center">
						<template slot-scope="scope">
							<el-button size="mini" @click="getFeedbackDetail(scope.row.feedback_id)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-pagination 
			@current-change="handleCurrentChange" 
			background layout="total, prev, pager, next" 
			:total="totalNum" class="fr">
		</el-pagination>
		<s-model v-if="showModel" :detail="feedbackDetail"></s-model>
			
	</div>
</template>

<script>
	import model from "./children/feedback_detail.vue"
	export default {
		created() {
			//======================================//
			this.$store.commit("saveGoods/clear");//进入所有活动页面的时候清除store里面的数据
			//======================================//
			this.fetchAllFeedback();
		},
		data() {
			return {
				page: 1,				//当前页数
				loading: true,			//加载小圆圈
				totalNum: 1,			//活动总数
				activeTimes: "",		//活动起始日期
				feedbackType: 1,    	//反馈类型
				showModel: false,   	//是否显示详情弹窗
				feedbackDetail: "",   	//反馈id(查询是哪个反馈)
				feedback: null 			//等待上传商品
			}
		},
		methods: {
			handleCurrentChange(pages) {
				this.page = pages;
			},
			handleFeedbackTypeChange() {
				//this.feedbackType;
			},
			//从后台获取活动数据
			fetchAllFeedback() {
				this.loading = true;
				//请求url
				var url = `${this.url}/feedback/feedback_get_list.action`;
				var params = {
					page: this.page,
					row: 10
				};
				//发送请求 
				this.$http.get(url, { params }).then((res) => {
					if( res.data.success ) {
						this.loading = false;
						this.feedback = res.data.result.rows;
						//console.log(res.data.result)
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			//获取反馈详情
			getFeedbackDetail(id) {
				this.showModel = true;
				var url = `${this.url}/feedback/feedback_get_info.action`;
				var params = { feedback_id: id };
				this.$http.get(url, { params }).then((res) => {
					if( res.data.success ) {
						this.feedbackDetail = res.data.result;
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			}
		},
		components: {
			"s-model": model
		}

	}
</script>

<style scoped lang="scss">

</style>